<script lang="ts" setup>
import { SvgIcon } from '@/components'

const connectorList = [
  {
    label: '静态上传',
    icon: 'i-mynaui:brand-google-solid',
    list: [
      {
        label: 'Excel',
        icon: 'i-vscode-icons:file-type-excel',
      },
      {
        label: 'Csv',
        icon: 'i-flowbite:file-csv-solid',
      },
    ],
  },
  {
    label: '数据库连接',
    icon: 'i-mynaui:brand-slack-solid',
    list: [
      {
        label: 'MySql',
        icon: 'i-logos:mysql',
      },
    ],
  },
]
</script>

<template>
  <div class="h-full w-full p-4">
    <ElScrollbar>
      <ElTimeline class="w-full ps-0">
        <ElTimelineItem v-for="e in connectorList" :key="e?.label" :timestamp="e.label" placement="top">
          <div class="grid h-full w-full" :class="$style.connector">
            <template v-for="u in e.list" :key="u.label">
              <ElCard
                class="h-[100px] w-[100px] cursor-pointer"
                body-class="h-full flex flex-col items-center gap-2"
              >
                <SvgIcon :name="u.icon" class="text-[30px]" />
                <ElText>{{ u.label }}</ElText>
              </ElCard>
            </template>
          </div>
        </ElTimelineItem>
      </ElTimeline>
    </ElScrollbar>
  </div>
</template>

<style lang="scss" module>
.connector {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-template-rows: repeat(auto-fill, 100px);
  grid-gap: 16px;
}
</style>
